<template>
  <div
    v-loading="loading"
    :class="config.windowSize == 0 ? 'card_group min' : config.windowSize == 1 ? 'card_group mid' : 'card_group big'"
  >
    <div class="cardShow">
      <header>
        <el-tooltip :content="config.name" placement="top-start">
          <span>{{config.name}}</span>
        </el-tooltip>
        <span class="tools">
          <el-select
            size="mini"
            v-if="config.type!=1 && config.windowSize != 0"
            v-model="selectType"
            class="select-type-content"
          >
            <el-option value="month" label="按月"></el-option>
            <el-option value="week" label="按周"></el-option>
            <el-option value="day" label="按天"></el-option>
            <el-option value="hour" label="按时"></el-option>
            <el-option value="minute" label="按分"></el-option>
          </el-select>
          <template v-if="config.type == 1">
            <span
              style="cursor: pointer; padding: 0 3px;"
              :class="funnelSelectValue=='overview'?'link-none':''"
              @click="funnelSelectValue='overview'"
            >漏斗</span>
            <span
              style="cursor: pointer; padding: 0 10px 0 3px;"
              :class="funnelSelectValue=='trends'?'link-none':''"
              @click="funnelSelectValue='trends'"
            >趋势</span>

          </template>
          <el-dropdown trigger="click" @command="command_change">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="1">下载</el-dropdown-item>
              <el-dropdown-item :command="2">设置</el-dropdown-item>
              <el-dropdown-item :command="3">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </header>
      <section class="card-sec"></section>
      <el-dialog
        top="12vh"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        class="diglog_setting"
        title="设置"
        :visible.sync="dialog_save"
        width="40%"
      >
        <div class="save_config dialog">
          <div class="line">
            <div class="left">图表类型</div>
            <div class="right">
              <template v-for="item in chartList">
                <span
                  :key="item.value"
                  @click="handleChangeChart(item)"
                  :class="{'type_ech': true, 'type_ech_size': true, 'active': dialog_form.chartType === item.value}"
                >{{item.label}}</span>
              </template>
            </div>
          </div>
          <div class="line">
            <div class="left">窗口尺寸</div>
            <div class="right">
              <template v-for="item in sizeList">
                <span
                  :key="item.value"
                  :class="{'type_ech': true, 'type_ech_size': true, 'active': dialog_form.windowSize == item.value}"
                  @click="handleChangeSize(item)"
                >{{item.label}}</span>
              </template>
            </div>
          </div>
          <div class="line">
            <div class="left">显示条数</div>
            <div class="right">
              <el-select size="mini" v-model="dialog_form.limit" clearable>
                <el-option
                  v-for="item in limitList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="line">
            <div class="left">备注</div>
            <div class="right big">
              <el-input v-model="config.bz" type="textarea" :rows="3" :size="size"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="diglog_foot">
          <el-button :size="size" @click="dialog_save = false">取 消</el-button>
          <el-button :size="size" type="primary" @click="handleConfirmConfig">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "cardShow",
  props: {
    configInit: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    configInit: {
      handler(val) {
        this.handleConfigInit(val);
      },
      deep: true
    }
  },
  created() {
    this.handleConfigInit(this.configInit);
  },
  mounted() {},
  computed: {},
  components: {},
  data() {
    return {
      loading: false,
      config: {},
      size: "small",
      option: null,
      dialog_save: false, // 窗口开关
      dialog_form: {
        windowSize: null,
        chartType: null,
        limit: null
      },
      chartList: [
        {
          value: 0,
          label: "线图"
        },
        {
          value: 1,
          label: "柱图"
        },
        {
          value: 2,
          label: "表格"
        },
        {
          value: 3,
          label: "数值"
        },
        {
          value: 4,
          label: "环形图"
        }
      ], // 图表类型list
      sizeList: [
        {
          value: 0,
          label: "小"
        },
        {
          value: 1,
          label: "中"
        },
        {
          value: 2,
          label: "大"
        }
      ], // 窗口大小list
      limitList: [
        {
          label: "前10项",
          value: 10
        },
        {
          label: "前20项",
          value: 20
        },
        {
          label: "前30项",
          value: 30
        },
        {
          label: "前40项",
          value: 40
        },
        {
          label: "前60项",
          value: 60
        },
        {
          label: "前100项",
          value: 100
        }
      ], // 显示项list
      funnelSelectValue: "overview", // 漏斗类型默认值
      selectType: "day", // 天/时类型切换
    };
  },
  methods: {
    // 处理接受的查询模块信息函数
    handleConfigInit(val) {
      if (val.chartType == 4) {
        val.windowSize = 2; // 漏斗默认为大
      }
      this.config = Object.assign({}, val);
      console.log(this.config,'看板配置信息')
    },
    // 下载 设置 删除 枚举操作
    command_change(key) {
      switch (key) {
        case 1: // 下载
          break;
        case 2: // 设置
          this.dialog_save = true;
          break;
        case 3: // 删除
          this.$emit("del_card");
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

::v-deep .tooltip-container {
  max-height: 60vh;
  overflow: auto;
}

::v-deep .tooltip-content {
  display: flex;

  .name {
    flex-grow: 1;
    margin-right: 10px;

    .name-index {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      display: inline-block;
      line-height: 20px;
      text-align: center;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
    }
  }

  .value {
    width: 80px;
  }
}

::v-deep .pie-tooltip-container {
  .name {
    .name-index {
      width: 10px;
      height: 10px;
      line-height: 10px;
    }
  }
}

::v-deep .cardShow {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  header {
    width: 98%;
    margin: 0 auto;
    position: relative;

    .select-date-content {
      width: 120px;
      margin-right: 5px;
    }

    .select-type-content {
      input.el-input__inner {
        width: 60px;
        padding: 0 0 0 10px;
        margin-right: 5px;
      }
    }

    .tools {
      margin-top: 5px;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      padding: 0 0.1rem 0 0;

      .el-icon-more {
        cursor: pointer;
        font-size: 0.26rem;
      }

      .el-icon-more:hover {
        font-weight: 800;
        color: rgba($color: #01b27a, $alpha: 0.8);
      }
    }
  }

  header:nth-child(1) {
    height: 0.5rem;
    text-indent: 0.1rem;
    font-weight: 500;
    line-height: 0.5rem;
  }

  header:nth-child(2) {
    height: 0.5rem;
    line-height: 0.5rem;
    .time-range {
      text-indent: 0.1rem;
      font-size: 10px;
    }
    .selected-box {
      transform: scale(0.95);
      position: absolute;
      right: 0rem;
      top: 0.1em;
      margin-bottom: 0.1rem;
      .vs {
        margin: 0 5px;
        font-size: 12px;
      }

      &.selected-box-small {
        .el-select {
          width: 120px;
        }
      }
    }
  }

  footer {
    width: 98%;
    margin: 0 auto;
    height: 0.5rem;
    font-size: 0.2rem;
    cursor: pointer;
    line-height: 0.5rem;
    padding: 0 0.1rem;

    span {
      margin: 0 0.2rem;
      letter-spacing: 1px;
    }
  }

  .card-sec {
    width: 98%;
    margin: 0 auto;
    /*flex: 1;*/
    flex-grow: 1;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    // height: calc(100% - 1.3rem);
    .chart-content {
      flex-grow: 1;
      flex-flow: column;
      /*height: 0;*/
      margin: 0.2rem 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .table-content {
      /*flex-grow: 1;*/
      margin: 0.2rem 0;
      overflow-x: hidden;
      overflow-y: hidden;
      /*height: 0;*/
      .el-table {
        margin: 0;
        height: 100%;
      }
    }
    .funnel-content {
      margin: 0.2rem 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .dq_time {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      font-size: 0.2rem;
      color: rgba($color: #909399, $alpha: 0.6);
      text-indent: 0.1rem;
    }

    .cont {
      font-size: 0.2rem;
      text-indent: 0.2rem;
      height: 0.7rem;
      line-height: 0.7rem;

      span {
        font-size: 0.6rem;
        /*line-height: 1rem;*/
        margin-right: 0.2rem;
      }
    }

    .ech {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .card_group {
  .compare-number-content {
    font-size: 0.2rem;
    cursor: pointer;
    /*height: 0.5rem;*/
    /*line-height: 0.5rem;*/
    padding: 0 0.1rem;
  }

  &.min {
    .compare-number-content {
      width: 98%;
      margin: 0 auto;

      & > div {
        float: left;

        span {
          margin: 0 0.2rem;
          letter-spacing: 1px;
        }
      }
    }
  }

  &.mid,
  &.big {
    .main-number-content {
      display: flex;
      align-items: center;
    }
  }
}

// 弹窗
::v-deep .diglog_setting {
  .save_config {
    width: 100%;

    .line {
      width: 99%;
      margin: 0.2rem auto;
      display: flex;
      justify-content: space-between;

      .left {
        width: 20%;
        height: 100%;
        text-indent: 10px;
        height: 0.8rem;
        letter-spacing: 2px;
        font-size: 12px;
        display: flex;
        align-items: center;
      }

      .right {
        height: 100%;
        width: 80%;
        min-height: 0.8rem;
        display: flex;
        align-items: center;

        .type_ech {
          cursor: pointer;
          min-width: 0.6rem;
          height: 0.6rem;
          display: inline-block;
          margin: 0 0.2rem 0 0;
          text-align: center;
          line-height: 0.6rem;
          font-size: 10px;
          border-radius: 4px;
          border: 1px solid rgba($color: #e4e7ed, $alpha: 0.8);
          color: rgba($color: #e4e7ed, $alpha: 1);
        }

        .active {
          border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
          color: rgba($color: #01b27a, $alpha: 0.8);
        }

        .type_ech:hover {
          border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
          color: rgba($color: #01b27a, $alpha: 0.8);
        }

        .type_ech_size {
          min-width: 0.8rem;
          height: 0.8rem;
          line-height: 0.8rem;
          padding: 0 3px;
        }
      }

      .big {
        height: 2rem;
      }
    }
  }
}
</style>

<style scoped lang="scss">
.el-container .el-main {
  text-align: center;
  background-color: transparent;
}

.chart {
  width: 100%;
  height: 5rem;
  position: relative;
}
</style>
